<template>
  <div style="height: 100%">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>数据源管理</el-breadcrumb-item>
      <el-breadcrumb-item>数据库</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="table-wrap-box">
      <el-container style="height: 100%;">
        <el-main style="">
          <el-row>
            <el-col :span="24">
              <div class="table-header-box">
                <el-button type="danger" @click="deleteDatabase">删除数据库</el-button>
                <el-button type="primary" @click="createDatabase">创建数据库</el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="dbList" border row-key="databaseId" size="mini" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column v-for="(col, index) in columns" :label="col.label" :prop="col.prop" align="center">
              <template slot-scope="scope">
                <span v-if="col.oper">
                  <el-button size="mini" type="text" @click="seeConnInfo(scope.row)">查看连接信息</el-button>
                  <el-button size="mini" type="text" @click="rowEdit(scope.row)">编辑</el-button>
                  <el-button size="mini" type="text" @click="rowDel(scope.row)">删除</el-button>
                </span>
                <span v-else>{{ scope.row[col.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-card>

  </div>
</template>

<script>
import { $DatabaseApi } from "@/network/datasource/DatabaseApi";
import '@/assets/css/featureLayout.css';
import { useDrawer } from "@/components/drawer/BaseDrawer";
import DatabaseForm from "@/components/datasource/DatabaseForm.vue";

export default {
  name: "DatabaseManage",
  data() {
    return {
      databaseTreeData: [],
      treeProp: {
        children: 'children',
        label: 'name'
      },
      columns: [
        { prop: 'databaseName', label: '名称', width: "100", oper: false },
        { prop: 'description', label: '说明', width: "100", oper: false },
        { prop: 'driveType', label: '驱动类型', width: "100", oper: false },
        { prop: 'type', label: '数据库类型', width: "100", oper: false },
        { prop: 'createTime', label: '创建时间', width: "180", oper: false },
        { prop: 'createBy', label: '创建人', width: "100", oper: false },
        { prop: '', label: "操作", width: "180", oper: true }
      ],
      dbList: [],
      checkedIds: [],
    }
  },
  methods: {
    createDatabase() {
      useDrawer(DatabaseForm, { title: "创建数据库"});
    },

    handleSelectionChange(val) {
      this.checkedIds = val.map(item => {
        return item.databaseId;
      })
    },

    async getDatabaseList() {
      const params = {
        "databaseName": ""
      }
      const res = await $DatabaseApi.getDbList(params);
      this.dbList = res.data;
    },

    deleteDatabase() {

    },

    seeConnInfo() {

    },

    rowEdit(row) {

    },

    async rowDel(row) {
      this.$confirm('将删除选择的数据库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const param = {
          id: row.databaseId,
          connectionId: row.connectionId,
          name: row.databaseName,
          delDb: true,
        }
        const res = await $DatabaseApi.remove(param);
        this.ShowMessage(res);
        await this.getDatabaseList();
      })
    },
  },

  created() {
    this.getDatabaseList();

    this.$bus.on('confirm-click', () => {
      this.getDatabaseList();
    });

  }
}
</script>

<style scoped>
.tree-top-tool-btn-box {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
  padding: 5px;
}

.mysql-icon {
  width: 0.5em;
  height: 0.5em;
}

::v-deep .tree-node-text {
  font-size: 14px;
  margin-left: 5px;
  display: flex;
  align-items: center;
}

.db-tree-box {
  padding-top: 5px;
}

.tree-node-icon {
  width: 1.5em;
  height: 1.5em;
}

.table-header-box {
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>